<template>
  <div>
    <p ref="p">msg: {{ msg }}</p>
    <p>msg2: {{ msg2 }}</p>
    <button @click="update">更新msg</button>
  </div>
</template>

<script>
export default {
  name: 'NextTickTest',

  data () {
    return {
      msg: 'abc',  // dep {subs: [userWatcher, renderWatcher]}
      msg2: 'xxx'
    }
  },
  watch: {
    msg (value) {
      console.log('监视到msg变化了', value)
    }
  },
  methods: {
    update () {
      this.msg2 = 'abcc'   // nextTick(flushQueue)
      // this.msg = 'abcd' // dep.notify()
      // 直接操作只能操作到旧的DOM
      // alert(this.$refs.p.innerHTML)
      // 如何操作更新后的DOM
      this.$nextTick(() => {
        alert(this.$refs.p.innerHTML)
      })


      this.msg = 'abcd'

    }
  }
}
</script>

<style scoped>

</style>
